"use client";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Image from "next/image";
import { useRouter } from "next/navigation";
import p1 from "../../../public/1.jpg";
import p2 from "../../../public/2.jpg";
export default function IndexPage() {
  const router = useRouter();
  return (
    <Box>
      <Container
        sx={{
          display: "flex",
          flexDirection: "column",
          pt: { xs: 10, sm: 16 },
          pb: { xs: 8, sm: 12 },
        }}
      >
        <div>
          <div style={{ fontSize: "2rem", fontWeight: "bold" }}>
            The Human
            <h4
              style={{
                color: "rgb(56, 116, 203)",
                display: "inline-block",
                marginLeft: "6px",
              }}
            >
              G
            </h4>
            ut
            <h4
              style={{
                color: "rgb(56, 116, 203)",
                display: "inline-block",
                marginLeft: "6px",
              }}
            >
              M
            </h4>
            icrobial
            <h4
              style={{
                color: "rgb(56, 116, 203)",
                display: "inline-block",
                marginLeft: "6px",
              }}
            >
              P
            </h4>
            rotein
            <h4
              style={{
                color: "rgb(56, 116, 203)",
                display: "inline-block",
                marginLeft: "6px",
              }}
            >
              S
            </h4>
            tructure Database
          </div>
        </div>

        <div style={{ marginBottom: "2rem" }}>
          <h1
            style={{
              float: "right",
              color: "rgb(56, 116, 203)",
              cursor: "pointer",
            }}
          >
            <a href="http://www.leidailab.cn/"> LD Lab</a>
          </h1>
        </div>

        <div style={{ display: "flex" }}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <div style={{ padding: "3rem" }}>
              <li style={{ fontSize: "1.5rem" }}>
                Human Gut Microbial Protein Structure database(GMPS) is a
                platform for exploring the functional proteins of gut
                microorganisms based on structure. It contains a total of
                2,700,615 protein structures from 968 Bacteria, 209 Phages, and
                331 Prophages.{" "}
              </li>
              <li
                style={{
                  fontSize: "1.5rem",
                  marginTop: "2rem",
                }}
              >
                Users can submit template structures to compare with the GMPS
                database(
                <span
                  style={{ cursor: "pointer", color: "rgb(56, 116, 203)" }}
                  onClick={() => router.push("align")}
                >
                  align
                </span>
                )or download protein structures from specific species(
                <span
                  style={{ cursor: "pointer", color: "rgb(56, 116, 203)" }}
                  onClick={() => router.push("download")}
                >
                  download
                </span>
                ).
              </li>
            </div>

            <div>
              <Image
                src={p1}
                width={300}
                height={300}
                alt="Picture of the author"
              />
              <div
                style={{
                  textAlign: "center",
                  fontWeight: "bold",
                  marginTop: "1.5rem",
                  paddingLeft: "1rem",
                }}
              >
                microbial taxonomy
              </div>
            </div>
          </div>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            width: "100%",
            marginTop: "1rem",
          }}
        >
          <Image
            src={p2}
            // width={500}
            // height={500}
            alt="Picture of the author"
          />
        </div>
      </Container>
    </Box>
  );
}
